<template>
  <div>
    <el-row type="flex"
            align="middle">
      <el-col :span="3">
        <font>省份：</font>
      </el-col>
      <el-col :span="9">
        <el-select v-model="province"
                   placeholder="请选择"
                   @change="provinceChanged">
          <el-option :key="''"
                     :label="'全部'"
                     :value="''">
          </el-option>
          <el-option v-for="item in provinces"
                     :key="item.code"
                     :label="item.name"
                     :value="item.name">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="3">
        <font>城市：</font>
      </el-col>
      <el-col :span="9">
        <el-select v-model="city"
                   :loading="loadingCity"
                   @change="cityChanged"
                   placeholder="请选择">
          <el-option :key="''"
                     :label="'全部'"
                     :value="''">
          </el-option>
          <el-option v-for="item in cities"
                     :key="item.code"
                     :label="item.name"
                     :value="item.name">
          </el-option>
        </el-select>
      </el-col>
    </el-row>
  </div>
</template>
 
<script type="text/javascript">
import provinceCity from '../../../static/provinceCity.json'
export default {
  name: 'provinceCity',

  created () {
    this.provinces = provinceCity.provinces
  },
  data () {
    return {
      loadingCity: false,
      province: '',
      city: '',
      provinces: [],
      cities: []
    }
  },
  methods: {
    provinceChanged (value) {
      if (value !== '') {
        this.loadingCity = true
        for (var item of this.provinces) {
          if (item.name === value) {
            this.cities = item.cities
            this.city = ''
            this.loadingCity = false
            break
          } else {
            continue
          }
        }
      } else {
        this.cities = []
        this.city = ''
      }
      this.$emit('selectChange', this.province, this.city)
    },
    cityChanged (value) {
      this.$emit('selectChange', this.province, this.city)
    }
  }
}
</script>
 
